<template>
  <view v-if="shenheStatus == 0" class="content">
    <view class="videoList">
      <view
        class="item"
        v-for="item of list"
        :key="item.id"
        @click="goLink(item)"
      >
        <view class="img">
          <image :src="item.pic_url" mode="aspectFill"></image>
          <i class="iconfont icon-play-fill"></i>
        </view>

        <view class="txt">
          <view class="name">{{ item.title }}</view>
          <view class="des">{{ item.content }}</view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { searchVideo } from "@/api/video";

export default {
  components: {
    Shenhe,
  },

  data() {
    return {
      list: [],
      isEnd: false,
      limit: 10,
      page: 1,
    };
  },

  async onLoad() {
    this.clear();
  },

  methods: {
    onPullDownRefresh() {
      this.clear();
    },

    goLink(item) {
      this.$utils.toUrl(
        "/marketing/video/item/index?data=" + JSON.stringify(item)
      );
    },

    async clear() {
      this.list = [];
      this.isEnd = false;
      this.page = 1;

      this.searchVideo();
    },

    async searchVideo() {
      let { limit, page } = this;

      let res = await searchVideo(
        {
          limit,
          page,
        },
        true
      );

      if (!res.code) {
        let { list: oldList } = this,
          { totalCount, data } = res.data;

        if (data.length) {
          oldList.push(...data);
          this.page = this.page + 1;
        }

        if (oldList.length >= parseInt(totalCount)) {
          this.isEnd = true;
        }
      }
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.searchVideo();
  },
};
</script>

<style lang="less" scoped>
.content {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.videoList {
  padding: 0 24rpx;
  background: #fff;
}

.item {
  display: flex;
  padding: 24rpx 0;
  border: 1px solid #f8f8f8;
}

.img {
  position: relative;
  margin-right: 20rpx;
  width: 160rpx;
  height: 160rpx;

  image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }

  .iconfont {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: rgba(255, 255, 255, 0.9);
    font-size: 70rpx;
  }
}

.txt {
  flex: 1;
  overflow: hidden;
}

.name {
  display: -webkit-box;
  height: 68rpx;
  line-height: 34rpx;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  font-size: 28rpx;
  color: #262626;
}

.des {
  padding-top: 10rpx;
  font-size: 24rpx;
  color: #8c8c8c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
